<template>
    <el-container class="otherGroupWarp">
        <el-main class="mainBox">
            <div class="mainContent">
                <div class="title">
                    <label>教研组</label>
                </div>
                <ul class="groupWarp">
                    <li class="groupList" v-for="(item, index) in groupList.list" :key="index">
                        <div class="cover" @click="toGroup(item)">
                            <el-image :src="item.cover | pictureUrl"></el-image>
                        </div>
                        <div class="dateils">
                            <div class="groupName">
                                <label>{{item.title}}</label>
                                <label>访问量：{{item.viewnum}}</label>
                            </div>
                            <div class="company">
                                <label>单位：{{item.organizationName}}</label>
                            </div>
                            <div class="synopsis">
                                <p v-html="'简介:'+item.describe"></p>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="block">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="page" :page-sizes="[5, 10, 20, 25]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </el-main>
        <el-aside class="rightBox">
            <div class="rightContent">
                <div class="title">
                    <label>热门教研组</label>
                </div>
                <ul class="hotWarp">
                    <li class="hotList" v-for="(item, index) in groupListHot.list" :key="index" @click="toGroup(item)">
                        <div class="user">
                            <span>{{index+1}}</span>
                            <label style="cursor: pointer;">{{item.title}}</label>
                        </div>
                        <div class="count">
                            <label>{{item.viewnum}}</label>
                        </div>
                    </li>
                </ul>
            </div>
        </el-aside>
    </el-container>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        computed:{
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
            })
        },
        beforeMount(){
            this.researchGroup()
            this.hotTeachingResearchGroup()
        },
        data() {
            return {
                src: require('../../../assets/img/headportrait03.jpg'),
                page:1,
                pageSize:5,
                total:0,
                groupList:{},
                groupListHot:{}
            }
        },
        methods:{
            toGroup(item){
                if (this.userInfo.id && item.id) {
                    if(this.userInfo.xxdm != item.organizationId){
                        this.$store.dispatch('visitorAllModule/visitorAdd', {
                            fromuserid: item.id,
                            visitorid: item.id,
                            type: 4
                        })
                    }
                }
                this.$router.push({path:'/research/researchGroup',query:{
                    group: item
                }})
                this.$store.commit('researchModule/INIT_GROUP', item)
            },
             researchGroup(){
                this.$store.dispatch('researchModule/groupPage', {
                    organizationId: this.otherUserInfo.xxdm,
                    limit: this.pageSize,
                    page: this.currentPage,
                }).then(res =>{
                    if(res){
                        this.total = res.total
                        res.list.map(item => {
                            this.$store.dispatch('visitorAllModule/visitorPageTotal', {
                                userId: item.id
                            }).then(res => {
                                if (res.data.code == 200) {
                                    item.viewnum = res.data.result.total
                                }
                            })
                        })
                        this.groupList = res
                    }
                })
            },
             hotTeachingResearchGroup(){
                this.$store.dispatch('researchModule/hotTeachingResearchGroup', {
                    organizationId: this.otherUserInfo.xxdm,
                }).then(res =>{
                    if(res){
                        res.list.map(item => {
                            this.$store.dispatch('visitorAllModule/visitorPageTotal', {
                                userId: item.id
                            }).then(res => {
                                if (res.data.code == 200) {
                                    item.viewnum = res.data.result.total
                                }
                            })
                        })
                        this.groupListHot = res
                    }
                })
            },
            
            // 每页显示条数
             handleSizeChange(val) {
                this.pageSize = val
                this.researchGroup()
            },

            // 当前页
            handleCurrentChange(val) {
                this.currentPage = val
                this.researchGroup()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .otherGroupWarp {
        width: 81%;
        margin: 0 auto;

        .title {
            font-size: 14px;
            color: #303133;
            text-align: left;
            box-sizing: border-box;
            padding-bottom: 8px;
            border-bottom: 2px solid #409EFF;
        }

        .mainBox {
            padding-left: 0;

            .mainContent {
                background-color: white;
                box-sizing: border-box;
                padding: 10px;
                width: 100%;
                height: 100%;

                .groupWarp {
                    list-style-type: none;
                    margin-block-start: 0;
                    margin-block-end: 0;
                    padding-inline-start: 0;


                    .groupList {
                        height: 160px;
                        overflow: hidden;
                        margin-top: 15px;

                        .cover {
                            float: left;
                            box-sizing: border-box;
                            padding: 8px;
                            border: 1px solid #EBEEF5;
                            width: 160px;
                            height: 160px;
                            cursor: pointer;
                        }

                        .dateils {
                            float: left;
                            margin-left: 10px;
                            width: calc(100% - 170px);
                            height: 100%;

                            .groupName {
                                width: 100%;
                                box-sizing: border-box;
                                padding-bottom: 10px;
                                border-bottom: 1px dashed #DCDFE6;
                                margin-top: 10px;

                                label {
                                    display: block;
                                    font-size: 14px;
                                }

                                label:first-of-type {
                                    float: left;
                                    color: #303133;
                                }

                                label:last-of-type {
                                    float: right;
                                    color: #409EFF;
                                }

                            }

                            .groupName::after {
                                content: "";
                                display: block;
                                width: 100%;
                                font-size: 0;
                                clear: both;
                            }
                        }

                        .company {
                            text-align: left;
                            font-size: 14px;
                            color: #303133;
                            margin-top: 15px;
                        }

                        .synopsis {
                            font-size: 14px;
                            color: #303133;

                            p {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3;
                                overflow: hidden;
                                text-align: justify;
                            }
                        }
                    }
                }

                .block{
                    margin-top: 30px;
                }
            }
        }

        .rightBox {
            padding: 20px 0;

            .rightContent {
                background-color: white;
                box-sizing: border-box;
                padding: 10px;
                width: 100%;
                height: 100%;

                .hotWarp {
                    list-style-type: none;
                    margin-block-start: 0;
                    margin-block-end: 0;
                    padding-inline-start: 0;
                    margin-top: 10px;

                    .hotList {
                        height: 40px;
                        line-height: 40px;

                        .user {
                            float: left;
                            color: #303133;
                            font-size: 14px;

                            span {
                                display: inline-block;
                                width: 20px;
                                height: 20px;
                                line-height: 20px;
                                color: white;
                                background-color: #909399;
                                margin-right: 6px;
                            }
                        }

                        .count {
                            float: right;
                            color: #409EFF;
                            font-size: 14px;
                        }
                    }

                    .hotList:nth-child(1) .user>span,
                    .hotList:nth-child(2) .user>span,
                    .hotList:nth-child(3) .user>span {
                        background-color: #409EFF;
                    }
                }
            }
        }

    }
</style>